<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客房预订</title>
</head>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
}

.booking-container {
  max-width: 500px;
  margin: 50px auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #76c7c0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #6abbb3;
}

@media (max-width: 600px) {
  .booking-container {
    margin: 20px;
  }
}
</style>
<body>
<div class="booking-container">

  <h1>客房预订</h1>
  <form action="add" method="get">

    <div class="input-group">
      <label for="CheckInDate">入住日期:</label>
      <input type="datetime-local" id="CheckInDate" name="CheckInDate" required>
    </div>
    <div class="input-group">
      <label for="CheckOutDate">退房日期:</label>
      <input type="datetime-local" id="CheckOutDate" name="CheckOutDate" required>
    </div>
    <div class="input-group">
      <label for="CustomerName">客户姓名:</label>
      <input type="text" id="CustomerName" name="CustomerName"  required>
    </div>
    <div class="input-group" style="display: none">
      <label for="ReservationStatus">状态:</label>
      <input type="text" id="ReservationStatus" name="ReservationStatus" value="已预定" >
    </div>

    <div class="input-group" style="display: none">
      <label for="TotalAmount">价格:</label>
      <input type="text" id="TotalAmount" name="TotalAmount" value="1" >
    </div>

    <div class="input-group">
      <label for="RoomNumber">房间选择:</label>
      <select id="RoomNumber" name="RoomNumber" required>
        <c:forEach var="room" items="${list}">
          <option value="${room.id}">房间:&nbsp${room.num}号&nbsp&nbsp价格:&nbsp${room.price}</option>
        </c:forEach>
      </select>
    </div>
    <button type="submit">提交预订</button>
  </form>
</div>
</body>
</html>